<template>
<HomeHeader></HomeHeader>
	<div class="content">
		<div style="text-align: center;">
			  <van-image
			    round
			    width="4rem"
			    height="4rem"
			    src="https://webstatic.mihoyo.com/upload/contentweb/2022/08/16/0b8632a0c1501c7de882cb08789fcf0c_1230141489251612305.png"
			  />
		 <!-- <van-col span="16">
			  <div class="member-detail">
			  	<p class="nickname">{{userinfo.username}}</p>
			  	<p class="info">{{userinfo.intro}}</p>
			  </div>
		  </van-col> -->
</div>
		<van-cell-group >
			<van-grid clickable :border="false">
			  <van-grid-item icon="like-o" text="我的喜好" to="/" />
			  <van-grid-item icon="star-o" text="收藏" to="/" />
			  <van-grid-item icon="down" text="本地" to="/" />
			  <van-grid-item icon="friends-o" text="我的好友" to="/" />
			</van-grid>
		</van-cell-group>
		<van-cell-group title="基本资料">
		  <van-cell title="个人资料" is-link to="/"></van-cell>
		  <van-cell title="往世乐土" is-link to="/"></van-cell>
		  <van-cell title="关于" is-link to="/"></van-cell>
		</van-cell-group>
	</div>
	<div style="background-color: whitesmoke">
	<van-button round  type="primary" size="large">退出登录</van-button>
	</div>
</template>

<script lang="ts" setup>
	import {reactive,onMounted} from 'vue';
	import {getUserInfo} from '@/api/user.ts'
	import HomeHeader from "_c/header/HomeHeader.vue"
	const badge_numbers = reactive({
		"wait_pay": 2,
		"wait_send": 4,
		"wait_receive":5
	})
	const userinfo = reactive({
		"username":"爱丽希雅",
		"intro": "永世乐土的主人，逐火之娥第二位",
		"avator": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
	})
	onMounted(()=>{
		console.log("this is on mounted")
		getData()
	})
	const getData=()=>{
			const id=1
			getUserInfo(id)
			.then(res=>{
				console.log('getUserInfo',res)
				if(res.code != 0){
					console.log(`获取数据失败,`+res.message)
				} else{
					//注意这里的赋值方式，不能整体赋值
					//userinfo=res.data
					userinfo.username=res.data.username
					userinfo.intro=res.data.intro
					console.log("获取数据成功")
				}
			})
			.catch(err=>{
				console.log(err,`服务端错误`)
			})
	}
</script>

<style>
	.content {
		background-color: whitesmoke;
		height: 500px;
		padding: 15px 10px;
	}
	.member-detail{
		font-size: 14px;
	}
</style>